<template>
	<view class="time-card-record">
		<view class="page-title">时长卡名称：{{timeCardName}}</view>
		<view class="header-box">
			<view>日期：</view>
			<uni-datetime-picker v-model="range" type="daterange" @change="confirmEvent" />
		</view>
		<view class="time-box">
			<text>总数量：<text class="num-text">{{total || 0}}</text></text>
			<text>总金额：<text class="num-text">￥{{orderAmount || 0}}</text></text>
		</view>
		<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
			<view class="main">
				<view class="card-box" v-for="(item,index) in listData" :key="index">
					<view class="card-title">包间：{{item.timeCardName}}</view>
					<view class="card-text">使用时间：{{item.useTime}}</view>
					<view class="card-text">用户名：{{item.userName}}</view>
					<view class="flex-sb">
						<view class="card-text">获取途径：{{getSource(item.source)}}</view>
						<view class="card-text" v-if="item.createTime">{{`发送时间：${item.createTime}`}}</view>
					</view>
				</view>
				<view class="noMore">暂无更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [],
				listData: [],
				shopId: '',
				useStartDate: '',
				useEndDate: '',
				totalTime: 0,
				pageSize: 10,
				pageNum: 1,
				total: 0,
				orderAmount: 0,
				timeCardId: '',
				timeCardName: ''
			};
		},
		methods: {
			// 选择日期
			confirmEvent(dateArr) {
				this.useStartDate = dateArr[0]
				this.useEndDate = dateArr[1]
				this.pageNum = 1
				this.listData = []
				this.getRechargeOrder()
			},
			// 获取途径
			getSource(type) {
				switch (type) {
					case 'gift':
						return '商家赠送'
						break;
					case 'mt':
						return '美团大众兑换'
						break;
					case 'dy':
						return '抖音兑换'
						break;
				}
			},
			// 滚动加载
			getDataEvent() {
				if (this.listData.length < this.total) {
					this.pageNum++
					this.getRechargeOrder()
				}
			},
			// 获取时长卡使用记录列表
			getRechargeOrder() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					useStartDate: this.useStartDate,
					useEndDate: this.useEndDate,
					status: 1,
					timeCardId: this.timeCardId
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/recordList',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows]
					}
					this.total = res.total
					this.getCardOrderAmount();
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取时长卡金额
			getCardOrderAmount() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					useStartDate: this.useStartDate,
					useEndDate: this.useEndDate,
					status: 1,
					timeCardId: this.timeCardId
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/totalRecordAmount',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.orderAmount = res.data || 0
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.timeCardId = option.timeCardId
			this.timeCardName = option.timeCardName
			this.getRechargeOrder()
		}
	}
</script>

<style lang="scss" scoped>
	.time-card-record {
		.flex-sb{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.page-title {
			padding: 20rpx;
			background: #FFF;
			font-weight: bold;
			font-size: 30rpx;
		}

		.header-box {
			background-color: #FFF;
			display: flex;
			padding: 10rpx 20rpx;
			align-items: center;
			font-size: 28rpx;
		}

		.time-box {
			font-weight: 600;
			background: #FFF;
			padding: 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num-text {
				color: #ff9600;
			}
		}

		.scroll-box {
			height: calc(100vh - 248rpx);
		}

		.main {
			padding: 20rpx;
			background: #FFF;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
		}

		.card-title {
			font-weight: bold;
			font-size: 30rpx;
		}

		.card-text {
			color: #333;
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>